<template>
  <div>
    <p>
      <button class="btn btn-white btn-default btn-round" @click="add()">
        <i class="ace-icon fa fa-edit"></i>
        新增
      </button>
      &nbsp;
      <button class="btn btn-white btn-default btn-round" @click="list(1)">
        <i class="ace-icon fa fa-refresh"></i>
        刷新
      </button>
    </p>

    <pagination ref="pagination" :list="list"></pagination>

    <table id="simple-table" class="table  table-bordered table-hover">
      <thead>
        <tr>
          <#list fieldList as field>
            <#if field.nameHump != "createdAt" &&  field.nameHump != "updatedAt">
          <th>${field.nameCn}</th>
            </#if>
          </#list>
          <th>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="${domain} in ${domain}s"
          :key="${domain}.id"
          :index="${domain}.id">
          <#list fieldList as field>
            <#if field.nameHump != "createdAt" &&  field.nameHump != "updatedAt">
              <#if field.enums>
          <td>{{${field.enumsConst} | optionKV(${domain}.${field.nameHump})}}</td>
              <#else>
          <td>{{${domain}.${field.nameHump}}}</td>
              </#if>
            </#if>
          </#list>

          <td>
            <div class="btn-group">
              <button class="btn btn-xs btn-info" @click="edit(${domain})">
                <i class="ace-icon fa fa-pencil bigger-120"></i>
              </button>
              <button class="btn btn-xs btn-danger" @click="del(${domain}.id)">
                <i class="ace-icon fa fa-trash-o bigger-120"></i>
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- Modal -->
    <div id="form-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">${tableNameCn}表单</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <#list fieldList as field>
                <#if field.nameHump != "createdAt" &&  field.nameHump != "updatedAt" && field.name != "id">
              <div class="form-group">
                <label class="col-sm-2 control-label">${field.nameCn}</label>
                <div class="col-sm-10">
                  <#if field.enums>
                  <select v-model="${domain}.${field.nameHump}" class="form-control">
                    <option v-for="o in ${field.enumsConst}" :value="o.key">{{o.value}}</option>
                  </select>
                  <#else>
                    <input class="form-control" v-model="${domain}.${field.nameHump}">
                  </#if>
                </div>
              </div>
                </#if>
              </#list>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" @click="save()">保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Pagination from "../../components/pagination"

  export default {
    name: "${module}-${domain}",
    components: {Pagination},
    data() {
      return {
        ${domain}: {
          <#list fieldList as field>
          ${field.nameHump}: null,
          </#list>
        },
        ${domain}s: [],
        <#list fieldList as field>
            <#if field.enums>
        ${field.enumsConst}: ${field.enumsConst},
            </#if>
        </#list>
      }
    },
    mounted() {
      let _this = this
      _this.list(1)
    },
    methods: {
      /**
       * 获取${tableNameCn}（分页）
       * @param page
       */
      list(page) {
        let _this = this

        Loading.show()

        _this.$axios.post(process.env.VUE_APP_SERVER + '/${module}/admin/${domain}/list', {
          page: page,
          size: _this.$refs.pagination.size
        }).then((resp) => {
          if (resp.data.success) {
            _this.${domain}s = resp.data.content.list
            _this.$refs.pagination.render(page, resp.data.content.total)

            Loading.hide()
          }
        })
      },

      /**
       * 添加${tableNameCn}（显示模态框）
       */
      add() {
        let _this = this
        _this.${domain} = {
          <#list fieldList as field>
          ${field.nameHump}: null,
          </#list>
        }
        //  开启模态框
        $("#form-modal").modal('show')
      },

      /**
       * 编辑${tableNameCn}（显示模态框）
       */
      edit(${domain}) {
        let _this = this
        //  Object.assign(target, source)方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target)
        Object.assign(_this.${domain}, ${domain})
        //  开启模态框
        $("#form-modal").modal('show')
      },

      /**
       * 保存${tableNameCn}
       */
      save() {
        let _this = this

        //  保存校验
        if (1 != 1
          <#list fieldList as field>
            <#if field.name != "id" && field.nameHump != "createdAt" &&  field.nameHump != "updatedAt" && field.name != "sort">
              <#if !field.nullAble>
          || !Validator.require(_this.${domain}.${field.nameHump}, "${field.nameCn}")
              </#if>
              <#if (field.length > 0)>
          || !Validator.length(_this.${domain}.${field.nameHump}, "${field.nameCn}", 1, ${field.length?c})
              </#if>
            </#if>
          </#list>
        ) {
          return;
        }

        _this.$axios.post(process.env.VUE_APP_SERVER + '/${module}/admin/${domain}/save', _this.${domain}).then((resp) => {
          if (resp.data.success) {
            //  关闭模态框
            $("#form-modal").modal('hide')
            //  刷新表格
            _this.list(1)
            Toast.success('保存成功！')
          } else {
            Toast.warning(resp.data.message)
          }
        })
      },

      /**
       * 删除${tableNameCn}（根据id）
       * @param id
       */
      del(id) {
        let _this = this
        Confirm.show('删除${tableNameCn}后不可恢复，是否确认删除？', () => {
          _this.$axios.delete(process.env.VUE_APP_SERVER + '/${module}/admin/${domain}/delete/' + id).then((resp) => {
            if (resp.data.success) {
              //  刷新表格
              _this.list(1)
              Toast.success('删除成功！')
            }
          })
        })
      }
    }
  }
</script>

<style scoped>

</style>